import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import PopularPage from './PopularPage'
import TrendingPage from './TrendingPage'
import MyPage from "./my/MyPage";

export default class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {selectedTab: 'popular'};
        this.tabNames = ['popular', 'trending', 'favorite', 'my'];
        this.tabNamesCH = ['最热', '趋势', '收藏', '我的']

    }

    getNavigatorItem(position, page) {
        let imageSrc = null;
        let selectedColor = '#63B8FF';
        switch (position) {
            case 0:
                imageSrc = require('../../res/images/ic_popular.png');
                break;
            case 1:
                imageSrc = require('../../res/images/ic_trending.png');
                break;
            case 2:
                imageSrc = require('../../res/images/ic_favorite.png');
                break;
            case 3:
                imageSrc = require('../../res/images/ic_my.png');
                break;
        }

        return <TabNavigator.Item selected={this.state.selectedTab === this.tabNames[position]}
                                  title={this.tabNamesCH[position]}
                                  selectedTitleStyle={{color: selectedColor}}
                                  renderIcon={() => {
                                      return <Image style={styles.icon}
                                                    source={imageSrc}/>
                                  }}
                                  renderSelectedIcon={() => {
                                      return <Image style={[styles.icon, {tintColor: selectedColor}]}
                                                    source={imageSrc}/>
                                  }}
                                  onPress={() => {
                                      this.setState({selectedTab: this.tabNames[position]})
                                  }}>
            {page}
        </TabNavigator.Item>
    }

    render() {
        return (<View style={{flex: 1}}>
            <TabNavigator>
                {this.getNavigatorItem(0, <PopularPage {...this.props}/>)}
                {this.getNavigatorItem(1, <TrendingPage {...this.props}/>)}
                {this.getNavigatorItem(2, <TrendingPage {...this.props}/>)}
                {this.getNavigatorItem(3, <MyPage {...this.props}/>)}
            </TabNavigator>
        </View>)
    }

}

let styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26
    }
});